<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="物流详情" left-arrow fixed @click-left="onClickLeft" />
    <div class="logistics-info">
      <!-- <img :src="info.cpUrl" alt="" /> -->
      <div class="logistics-info-text">
        <div>物流状态：<span class="info_texts"  style="color: #55A624;">{{ info.logisticsStatusDesc }}</span></div>
        <div>物流公司：{{ info.logisticsCompanyName }}</div>
        <div>物流订单：{{ info.mailNo }}</div>
      </div>
    </div>
    <div class="logistics-bom">
      <div class="logistics-bom-title">订单跟踪</div>
      <van-steps direction="vertical" :active="0" active-color="#333">
        <van-step v-for="(item, index) in shipping" :key="index">
            <template #active-icon>
                <img v-if="item.logisticsStatus=='SIGN'" style="width: 0.46rem;" src="../../../../images/mine/chenggong.png" alt="">
                <img  v-else style="width: 0.46rem;" src="../../../../images/mine/icon_success1.png" alt="">
            </template>
          <template #inactive-icon v-if="index === shipping.length - 1">
                <img style="width: 0.46rem;" src="../../../../images/mine/wl.png" alt="">
            </template>
              <div class="logistics-bom-text">{{ item.desc }}</div>
          <div style="color: #999;font-size: 0.24rem;">{{item.time}}</div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>
<script>
import { SHIPPING_DATA, AFTER_SALES_INFO } from "@/api/mine";
import {parseTime} from '@/tool/methods'
export default {
  data() {
    return {
      orderId: "",
      shipping: [],
      info: {},
    };
  },
  created() {
    this.orderId = this.$route.query.id;
    this.initData();
  },
  methods: {
    initData() {
      let params = {
        id: this.$route.query.id,
      };
      this.$http.post(SHIPPING_DATA, params).then((res) => {
       let params = res.data.logisticsTraceDetailList.reverse();
        this.shipping=params.map(item=>{
          item.time=parseTime(item.time)
          return item;
        })
        this.info = res.data;
        // console.log(parseTime(this.shipping[0].time));

      });
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
  min-height: 100vh;
  padding-top: 46px;
  background: #f2f4f5;

  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}
.logistics-info {
  width: 100%;
  margin: 0 auto;
  //   margin-top: 0.32rem;
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 0.32rem;
  box-sizing: border-box;
  // img {
  //   width: 1.8rem;
  //   height: 1.8rem;
  //   border-radius: 5px;
  // }
  .logistics-info-text {
    width: 85%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 0.28rem;
    color: #333;
    line-height: 0.65rem;
    margin-left: .2rem;
    .info_texts{
      font-size: .4rem;
      font-weight: 600;
      color: #55A624;
    }
    // text-align: left;
  }
}
.logistics-bom {
  background-color: #fff;
  padding: 0.32rem;
  margin-top: 0.2rem;
  .logistics-bom-title {
    font-size: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 0.32rem;
    color: #5a5a5a;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 0.32rem;
  }
}
.logistics-bom-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: .28rem;
    //   color: #afafaf;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 0.2rem;
    }
</style>
